<template>

  <div>
    <div class="lng-padding top-bar lng-flex">
      <popup-picker :data="stationList" v-model="station" @on-show="onShow" @on-hide="onHide" show-name
                    value-text-align="left"
                    @on-change="onChange" placeholder="请选择统计类别"></popup-picker>
      <datetime placeholder="请选择开始日期"  value-text-align="left"></datetime>
      <datetime placeholder="请选择结束日期"  value-text-align="left"></datetime>
    </div>

    <view-box ref="viewBox">

      <div class="content patrol-management-content">
        <x-table :cell-bordered="false" style="background-color:#fff;">
          <thead>
          <tr>
            <th>巡检人</th>
            <th>巡检时间</th>
            <th>站点名称</th>
            <th class="status-select">
              <popup-picker :data="statusList" v-model="status" @on-show="onShow" @on-hide="onHide" show-name
                            value-text-align="center"
                            @on-change="onChange" placeholder="状态"></popup-picker>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr @click="goToDetail()">
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle green-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>王文</td>
            <td>2017-09-09</td>
            <td>嘉兴佳通加气站</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          </tbody>
        </x-table>
      </div>

    </view-box>

    <tab-bar  selected="2"></tab-bar>

    <div v-transfer-dom>
      <x-dialog v-model="showDetailDialog" class="dialog-text dialog-equipment-detail" hide-on-blur>
        <div class="dialog-title">
          设备详情
          <i class="icon icon-close" @click="showDetailDialog=false"></i>
        </div>
        <div class="dialog-detail">
          <ul>
            <li>设备编号：100212312</li>
            <li>站点名称：安燃燃气加气站</li>
            <li>设备类型：全启式安全阀</li>
            <li>标记名称：1#泵电机</li>
            <li>有效日期：2013-09-09</li>
            <li>产品编号：21212121</li>
            <li>产品名称：泵电机</li>
            <li>生产厂家：西安博康电子有限公司</li>
            <li>生产厂家电话：0573-88291929</li>
            <li>生产日期：2013-30-33</li>
            <li>安装厂家：苏州拓维</li>
            <li>安装厂家电话：12312211222</li>
            <li>安装人：屠华</li>
            <li>安装日期：2016-09-09</li>
            <li>剩余更换日期：<span class="blue-text">1234天</span></li>
          </ul>
        </div>

      </x-dialog>
    </div>

  </div>


</template>

<script>
  import {
    ViewBox,
    Flexbox,Datetime,
    XTable,
    Group,
    Picker,
    XInput,
    FlexboxItem,
    PopupPicker,
    Popup,
    Cell,
    TransferDom,
    XDialog
  } from 'vux'
  import tabBar from '@/components/equipment/public/tab-bar'


  export default {
    directives: {
      TransferDom
    },
    components: {
      tabBar,

      XDialog,Datetime,
      ViewBox,
      XTable,
      Cell,
      Group,
      XInput,
      Popup,
      PopupPicker,
      Flexbox,
      Picker,
      FlexboxItem,
    },
    mounted() {

    },
    data () {
      return {
        showDetailDialog: false,
        name: "",
        showSearchBox: true,
        area: [],
        station: [],
        stationList: [[
          {
            name: '嘉通站',
            value: '1',
          },
          {
            name: '嘉的萨满的萨克的萨克的撒接口的站',
            value: '2',
          },
        ]],
        status: [],
        statusList: [[
          {
            name: '显示全部',
            value: '1',
          },
          {
            name: '显示异常',
            value: "2",
          },
          {
            name: '显示正常',
            value: "3",
          },
        ]],
        showPopup: false,
        years: []
      }
    },
    watch: {
      years(val){
        console.log(val)
      }
    },
    methods: {
      goToDetail(){
        this.$router.push({
          name: 'patrolDetail',
          query: {id: 11}
        });
      },
      change(){
        this.$router.push({
          name: 'equipmentChange',
          query: {id: 11}
        })
      },
      toggleSearchBox(){
        this.showSearchBox = !this.showSearchBox;
      },
      search(){
        this.showSearchBox = false;
      },
      goPath(name){
        this.$router.push({
          name: name
        });
      },
      onChange (val) {
        console.log('val change', val)
      },
      onShow () {
        console.log('on show')
      },
      onHide (type) {
        console.log('on hide', type)
      }
    }
  }
</script>

<style scoped>


  .top-bar.lng-flex >*{
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
    margin: 0 5px;
  }

  .content {
    margin: 1.3rem 0 1.8rem;
  }

  .top-bar {
    position: absolute;
    z-index: 500;
    top: 0;
    width: 100%;
  }

  .top-bar:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: -2px;
    right: 0;
    height: 1px;
    border-top: 1px solid #C0BFC4;
    color: #C0BFC4;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .top-bar.lng-flex > div {
    white-space: nowrap;
    overflow: hidden;
  }

  .weui-cell {
    padding: 0;
  }

  .vux-cell-box:before {
    border: none;
    height: 0;
  }

  .lng-padding {
    padding: 4px 0;
  }

  .blue-button {
    float: right;
    padding: 4px 18px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
  }

  .vux-x-icon {
    width: .4rem;
    height: .4rem;
    vertical-align: middle;
    color: #4791d2;
  }

</style>
<style>
  .top-bar .weui-cell {
    padding: 5px 2px;
    border: 1px solid #C7C7C7;
    border-radius: 4px;
  }

  .equipment-content .weui-cell__ft {
    width: 100%;
    text-align: left;
  }

  .patrol-management-content .status-select .weui-cell{
    padding: 0;
  }

</style>

